<template>
	<view class="bg-[#060606] min-h-[100vh] overflow-hidden" :style="themeColor()">
		<view class="coupon-header fixed  left-0 right-0 top-0 z-10080">
<!--			&lt;!&ndash; #ifdef MP-WEIXIN &ndash;&gt;-->
<!--			<view :style="{height: headStyle, backgroundImage: 'url(' + img('addon/shop/coupon/coupon_uniapp.png') + ')',backgroundSize: '100%', backgroundPosition: 'bottom', backgroundRepeat: 'no-repeat'}">-->
<!--				<top-tabbar :data="param" class="top-header"/>-->
<!--			</view>-->
<!--			&lt;!&ndash; #endif &ndash;&gt;-->
<!--			&lt;!&ndash; #ifdef H5 &ndash;&gt;-->
<!--			<view class="h-[364rpx]" :style="{ backgroundImage: 'url(' + img('addon/shop/coupon/coupon_uniapp.png') + ')',backgroundSize: 'cover', backgroundPosition: 'bottom',backgroundRepeat: 'no-repeat'}"></view>-->
<!--			&lt;!&ndash; #endif &ndash;&gt;-->
      <view class="h-[364rpx] relative">
        <image src="@/image/lqzx/lqzx-top.png" class="w-[100%]"/>
        <image src="@/image/qiandao/return.png" style="width: 50rpx;height: 50rpx;left: 20rpx;position: absolute;top: 40rpx" @click="returnPage"/>
      </view>
<!--			<view class="-mt-[-36rpx] px-[var(&#45;&#45;sidebar-m)] py-[24rpx] flex items-center justify-between leading-[40rpx] text-[28rpx] bg-[#F6F6F6] rounded-t-[26rpx] relative z-99999" :class="{'!bg-[#fff]': typePopup}">-->
<!--				<text  :class="{ 'text-primary ': searchType == 'all' }" @click="searchTypeFn('all')">默认排序</text>-->
<!--				<view class="flex items-center" :class="{ 'text-primary': searchType == 'create_time' }" @click="searchTypeFn('create_time')">-->
<!--					<text class="mr-[4rpx]">最新</text>-->
<!--					<text v-if="create_time == 'asc'" class="text-[18rpx] text-[#626779] nc-iconfont nc-icon-a-xiangshangV6xx1" :class="{ '!text-primary': searchType == 'create_time' }"></text>-->
<!--					<text  v-else class="text-[18rpx] text-[#626779]  nc-iconfont nc-icon-a-xiangxiaV6xx1" :class="{ '!text-primary': searchType == 'create_time' }"></text>-->
<!--				</view>-->
<!--				<view class="flex items-center" :class="{ 'text-primary': searchType == 'price' }" @click="searchTypeFn('price')">-->
<!--					<text class="mr-[4rpx]">价格</text>-->
<!--					<text v-if="price == 'asc'" class="text-[18rpx]  text-[#626779] nc-iconfont nc-icon-a-xiangshangV6xx1" :class="{ '!text-primary': searchType == 'price' }"></text>-->
<!--					<text  v-else class="text-[18rpx] text-[#626779] nc-iconfont nc-icon-a-xiangxiaV6xx1" :class="{ '!text-primary': searchType == 'price' }"></text>-->
<!--				</view>-->
<!--				<view class="flex items-center" :class="{'text-primary': searchType == 'type' }" @click="searchTypeFn('type')">-->
<!--					<view class="w-[2rpx] h-[28rpx] bg-gradient-to-b from-[#333] to-[#fff] mr-[20rpx] flex-shrink-0"></view>-->
<!--					<text class="mr-[10rpx]">筛选</text>-->
<!--					 <text class="nc-iconfont color-[#626779] nc-icon-shaixuanV6xx text-[28rpx]"></text>-->
<!--				</view>-->
<!--			</view>-->
		</view>
		<mescroll-body ref="mescrollRef"  @init="mescrollInit" :down="{ use: false }"  height="auto" @up="getShopCouponListFn" :top="mescrollTop">
			<view class="py-[20rpx] sidebar-marign">
				<template v-for="(item, index) in list">
					<view v-if="item.btnType === 'collected'"
							class="flex items-center relative w-[100%] rounded-[20rpx] overflow-hidden py-[20rpx] text-[#999999] wlq-h-bg"
							:class="{'mt-[20rpx]':index}" @click="toDetail(item.id)" >
						<view class="box-border flex-1 border-0 border-r-[1px] border-[#FFDCDC] border-dashed flex items-center">
							<view class="w-[164rpx] box-border flex justify-center ">
								<view class="flex items-baseline">
									<text class="text-[26rpx] leading-[34rpx] text-center font-400 price-font">￥</text>
									<text class="text-[72rpx] font-500 text-left leading-[70rpx] max-w-[136rpx] truncate price-font">{{ item.coupon_price }}</text>
								</view>
							</view>
							<view class="flex-1 box-border ml-[10rpx]">
								<view class="text-[30rpx] leading-[42rpx] text-left font-500 text-[#ffffff]">
									<text v-if="item.min_condition_money === '0.00'">无门槛</text>
									<text v-else>满{{ item.coupon_min_price }}元可用</text>
                  <text class="bg-[#ffffff20] whitespace-nowrap text-[#ffffff] text-[24rpx] h-[32rpx] leading-[32rpx] p-[8rpx] ml-[15rpx] flex-shrink-0">{{ item.type_name }}</text>
								</view>
								<view class="mt-[10rpx] text-left flex items-center">
									<text class="text-[22rpx] truncate max-w-[190rpx] leading-[30rpx]">{{ item.title }}</text>
								</view>
								<view class="w-[100%] mt-[6rpx] text-[22rpx] leading-[30rpx]">
									<text v-if="item.valid_type == 1">领取之日起{{ item.length || '' }}天内有效</text>
									<text v-else> 有效期至{{ item.valid_end_time ? item.valid_end_time.slice(0, 10) : '' }}</text>
								</view>
							</view>
						</view>
						<view class="pr-[20rpx] pl-[34rpx]">
              <image src="@/image/lqzx/ylq.png" style="width: 140rpx;height: 120rpx"/>
<!--							<button :style="{width:'144rpx',height:'56rpx',color:'#fff', fontSize:'24rpx',lineHeight:'56rpx', padding:'0',backgroundColor:'#ee9ea2', border:'none' ,opacity :'1',borderRadius:'30rpx'}"  disabled>已领完</button>-->
						</view>
						<view class="absolute top-0 right-[190rpx]  h-[10rpx] w-[20rpx] rounded-br-[20rpx] rounded-bl-[20rpx] bg-[#F6F6F6] "></view>
<!--						<view class="absolute bottom-0 right-[190rpx] h-[10rpx] w-[20rpx] rounded-tr-[20rpx] rounded-tl-[20rpx] bg-[#F6F6F6]"></view>-->
					</view>
					<view v-else class="flex items-center relative w-[100%] overflow-hidden py-[30rpx] text-[#ffffff] wlq-bg" :class="{'mt-[20rpx]':index}" @click="toDetail(item.id)">
						<view class="relative box-border flex-1 border-0 border-r-[1px] border-[#FFDCDC] border-dashed flex items-center pl-[10rpx]">
							<view class="w-[164rpx] box-border flex justify-center">
								<view class="flex items-baseline text-[#ffffff]">
									<text class="text-[26rpx] leading-[34rpx] text-center font-400 price-font">￥</text>
									<text class="text-[74rpx] font-500 text-left leading-[70rpx] max-w-[136rpx] truncate price-font">{{ item.coupon_price }}</text>
								</view>
							</view>
							<view class="flex-1 box-border ml-[10rpx]">
								<view class="text-[30rpx] leading-[42rpx] text-left font-500">
									<text v-if="item.min_condition_money === '0.00'">无门槛</text>
									<text v-else>满{{ item.coupon_min_price }}元可用</text>
                  <text class="bg-[#ffffff20] whitespace-nowrap text-[#ffffff] text-[24rpx] h-[32rpx] leading-[32rpx] p-[8rpx] ml-[15rpx] flex-shrink-0">{{ item.type_name }}</text>
								</view>
								<view class="mt-[10rpx] text-left flex items-center">
									<text class="text-[22rpx] truncate max-w-[190rpx] leading-[30rpx] text-[#ffffff]">{{ item.title }}</text>
								</view>
								<view class="w-[100%] mt-[6rpx] text-[22rpx] leading-[30rpx] text-[#ffffff]">
									<text v-if="item.valid_type == 1">领取之日起<text>{{ item.length || '' }}</text>天内有效</text>
									<text v-else> 有效期至<text>{{ item.valid_end_time ? item.valid_end_time.slice(0, 10) : '' }}</text></text>
								</view>
							</view>
						</view>
						<view v-if="item.btnType === 'collecting'" @click.stop="collecting(item.id, index)" class="pr-[20rpx] pl-[34rpx]">
							<button :style="{width:'140rpx',height:'60rpx',color:'#450000', fontSize:'24rpx',lineHeight:'60rpx', padding:'0', background: 'linear-gradient( 180deg, #FFFBF0 0%, #FFC855 100%)',border:'none',borderRadius:'8rpx'}" >立即领取</button>
						</view>
						<view v-if="item.btnType === 'using'" @click.stop="toLink(item.id)" class="pr-[20rpx] pl-[34rpx]">
							<button :style="{width:'144rpx',height:'60rpx',color:'#450000', fontSize:'24rpx',lineHeight:'60rpx', padding:'0', background: 'linear-gradient( 180deg, #FFFBF0 0%, #FFC855 100%)',border:'none',borderRadius:'8rpx'}">去使用</button>
						</view>
						<view class="absolute top-0 right-[190rpx]  h-[10rpx] w-[20rpx] rounded-br-[20rpx] rounded-bl-[20rpx] bg-[#F6F6F6] "></view>
<!--						<view class="absolute bottom-0 right-[190rpx] h-[10rpx] w-[20rpx] rounded-tr-[20rpx] rounded-tl-[20rpx] bg-[#F6F6F6]"></view>-->
					</view>
				</template>
				<view v-if="!list.length && !loading" :style="{'height': nullPageHeight}" class="noData  rounded-[20rpx] flex items-center justify-center">
					<mescroll-empty :option="{tip : '暂无优惠券'}"></mescroll-empty>
				</view>
			</view>
		</mescroll-body>
		<u-popup :show="typePopup" mode="top" @close="typePopup = false"  :customStyle="{top:typePopupTopVal}" :safeAreaInsetBottom="false">
			<view @touchmove.prevent.stop>
				<scroll-view :scroll-x="true" scroll-with-animation :scroll-into-view="'id' + (subActive ? subActive - 1 : 0)"  class="px-[var(--sidebar-m)]  box-border bg-white rounded-b-[26rpx]">
					<view class="items-center flex py-[25rpx]  border-0 border-t-[2rpx] border-solid border-[#F0F2F8]">
						<text class="flex-shrink-0 w-[120rpx] h-[50rpx] text-[26rpx] leading-[50rpx] text-center text-[#626779] bg-[#F8F9FD] rounded-[30rpx] border-box mr-[20rpx] border-[2rpx] border-solid border-[#F8F9FD]" :class="{'!text-primary !border-primary !bg-[rgba(239,0,12,0.04)] font-500':item.value == curType}"
							v-for="(item,index) in typeList" :key="index" :id="'id' + index"
								@click="typeClick(index,item.value)">{{item.label}}
							</text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 强制绑定手机号 -->
		<bind-mobile ref="bindMobileRef" /> 
	</view>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, getCurrentInstance } from 'vue'
import { img, redirect, pxToRpx } from '@/utils/common'
import { topTabar } from '@/utils/topTabbar'
import { getShopCouponList, getCoupon, getMyCouponType } from '@/addon/shop/api/coupon'
import bindMobile from '@/components/bind-mobile/bind-mobile.vue';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
import useMescroll from '@/components/mescroll/hooks/useMescroll.js'
import {onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMemberStore from '@/stores/member'
import { useLogin } from '@/hooks/useLogin'
import { t } from '@/locale'

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
// 获取系统状态栏的高度
let menuButtonInfo:any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({title:'优惠券列表'})
/********* 自定义头部 - end ***********/

// 头部图片的高度
const headStyle = computed(() => {
	let style = (pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) +  364) + 'rpx'
	return style
})

const mescrollTop = computed(() => {
	let style = ''
	style = Object.keys(menuButtonInfo).length ? (pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) +  300) + 'rpx' : '300rpx'
	return style
})

const instance = getCurrentInstance();
let typePopupTopVal = ref()
const typePopupTopFn = () => {
	nextTick(() => {
		setTimeout(()=>{
			const query = uni.createSelectorQuery().in(instance);
			query.select('.coupon-header').boundingClientRect((data:any) => {
				typePopupTopVal.value = data.height + 'px';
			}).exec();
		})
	})
}
typePopupTopFn();

// 获取空页面高度
const nullPageHeight = computed(() => {
	let hei = '';
	// #ifndef  H5
	// 屏幕高度 - 图片高度 - 上下padding + 内容框上移高度 - 苹果手机安全距离
	hei = `calc(100vh - ${mescrollTop.value} - 40rpx)`
	// #endif
	// #ifdef H5
	// 屏幕高度 - 图片高度 - 上下padding + 内容框上移高度 - 苹果手机安全距离
	hei = `calc(100vh - 458rpx)`
	// #endif
	return hei
})

const list = ref<Array<Object>>([]);
const loading = ref<boolean>(true);
const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)

const getShopCouponListFn = (mescroll) => {
	loading.value = true;
	let data: object = {
		page: mescroll.num,
		limit: mescroll.size,
		order: searchType.value === 'all' ? '' : searchType.value,
		sort: searchType.value == 'price' ? price.value : create_time.value,
		type: curType.value || ''
	};

	getShopCouponList(data).then((res) => {
		let newArr = (res.data.data as Array<Object>).map((el: any) => {
			if (el.sum_count != -1 && el.receive_count === el.sum_count) {
				el.btnType = 'collected'//已领完
			}else if (!userInfo.value) {
				el.btnType = 'collecting'//领用
			} else {
				if (el.is_receive && el.limit_count === el.member_receive_count) {
					el.btnType = 'using'//去使用
				} else {
					el.btnType = 'collecting'//领用
				}
			}
			return el
		})
		//设置列表数据
		if (mescroll.num == 1) {
			list.value = []; //如果是第一页需手动制空列表
		}
		list.value = list.value.concat(newArr);
		mescroll.endSuccess(newArr.length);
		loading.value = false;
	}).catch(() => {
		loading.value = false;
		mescroll.endErr(); // 请求失败, 结束加载
	})
}

//强制绑定手机号
const bindMobileRef = ref(null)
const collecting = (coupon_id: any, index: number) => {
	if (!userInfo.value) {
		useLogin().setLoginBack({ url: '/addon/shop/pages/coupon/list' })
		return false
	}
	if(uni.getStorageSync('isbindmobile')){
		bindMobileRef.value.open()
		return false
	}
	getCoupon({ coupon_id, number: 1,type:'receive'  }).then(res => {
		if(res.code > 0){
			list.value[index].member_receive_count += 1
			list.value[index].receive_count += 1
			if(list.value[index].member_receive_count == list.value[index].limit_count
			|| (list.value[index].sum_count != -1 && list.value[index].receive_count === list.value[index].sum_count)
			){
				list.value[index].btnType = 'using'
			}
		}
		
	})
}
const toDetail = (coupon_id: any) => {
	redirect({ url: '/addon/shop/pages/coupon/detail', param: { coupon_id } })
}
const toLink = (coupon_id: any) => {
	redirect({ url: '/addon/shop/pages/goods/list', param: { coupon_id } })
}

// 优惠劵
const price = ref('');
const create_time = ref('');
const searchType = ref('all');
// 类型
const subActive = ref<number>(0)
const curType = ref('')
const typeList = ref<Array<Object>>([])
const typePopup = ref<boolean>(false)
const getMyCouponTypeFn = () =>{
    getMyCouponType().then(res =>{
        const obj = { label: '全部', value: '' };
        typeList.value.push(obj)
		typeList.value = typeList.value.concat(res.data)
    })
}
onLoad(()=>{
    getMyCouponTypeFn()
})

const returnPage = () => {
	uni.navigateBack({
		delta: 1
	})
}

const typeClick = (index : number,data:any) =>{
    subActive.value = index
    curType.value = data
    list.value = []
    getMescroll().resetUpScroll()
	typePopup.value = false
}
// 筛选
const searchTypeFn = (type) => {
	searchType.value = type;
	if ( type == 'all') {
		create_time.value = '';
		price.value = '';
	}
	if ( type == 'price') {
		create_time.value = '';
		if(price.value){
			price.value = price.value == 'asc' ? 'desc' : 'asc';
		}else{
			price.value = 'asc';
		}
	}
	if ( type == 'create_time') {
		price.value = '';
		if(create_time.value){
			create_time.value = create_time.value == 'asc' ? 'desc' : 'asc';
		}else{
			create_time.value = 'asc';
		}
	}
	if (type == 'type') {
		create_time.value = 'asc';
		price.value = 'asc';
		typePopup.value = true;
		
	} else {
		typePopup.value = false;
		list.value = [];

		getMescroll().resetUpScroll();
	}
}

</script>

<style lang="scss" scoped>
	button{
		box-sizing: border-box;
		&::after {
			display:none;
		}
	}
.background-size{
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 27%;
}


:deep(.u-popup .u-popup__content){
	border-bottom-left-radius:26rpx;
	border-bottom-right-radius:26rpx;
}
.wlq-bg {
  background-image: url("../../../../image/lqzx/quan-bg.png");
  background-size: 106% 120%;
  background-position: center;
}
  .wlq-h-bg {
    background-image: url("../../../../image/lqzx/quan-h-bg.png");
    background-size: 106% 120%;
    background-position: center;
  }
</style>